<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的data和animate等方法设计折叠与展开网页内容的特效</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
  //左侧二级分类
  (function(){
	var rtype = /(open|close)/i,
	getData = function(dt){
	  var 
	  parentDl = dt.data('parent_dl') || dt.parent(),
	  minHeight = dt.data('min_height') || dt.height(),
	  maxHeight = dt.data('max_height') || parentDl.height();
	  if(!dt.data('parent_dl')){
		  dt.data('parent_dl', parentDl);
		  dt.data('min_height', minHeight);
		  dt.data('max_height', maxHeight);
	  }
	  return {
		  parentDl : parentDl,
		  minHeight : minHeight,
		  maxHeight : maxHeight
	  };
	},
	maxLength = 13,
	rchs = /[^\u0000-\u00ff]/g,
	shell = $('.category_menu');
	shell.click(function(e){
	  var isOpen, data,
	  tar = e.target,
	  dt = $(tar).parent();
	  if(rtype.test(tar.className) && dt[0].nodeName.toUpperCase() === 'DT'){
		  isOpen = RegExp.$1.toLowerCase() === 'close';
		  (data = getData(dt)).parentDl.animate({
			  height : isOpen ? data.minHeight : data.maxHeight
		  });
		  tar.className = isOpen ? 'open' : 'close';
		  e.preventDefault();
	  }
	})
	//首次进入，切换菜单状态
	.find('dt').each(function(i, _dt){
	  var data;
	  if(_dt.parentNode.parentNode.className.indexOf('current') < 0){
		  (data = getData($(_dt))).parentDl.css('height', data.minHeight);
	  }
	});
	shell.find('dd > a').each(function(){
	  if(this.innerHTML.replace(rchs, '--').length > maxLength){
		  var el = $(this.parentNode).addClass('break');
		  //el.prev().addClass('break'); el.next().addClass('break');
	  }
	});
  })();
});
</script>

<div id="container">
<div class="wrap pro_read clearfix">
  <div class="col_lsider"><!--box start-->
    <div class="box">
      <div class="title-bar">
        <h2>iPhone 主机 • 配件</h2>
      </div>
      <div class="box-content_wrap clearfix">
        <div class="box-content">
          <ul class="category_menu">
            <li class="current">
              <dl class="clearfix">
                <dt><a class="close" href=""></a><a href="">iPhone 主机</a> </dt>
                <dd><a class="cur" href="">iPhone8</a></dd>
                <dd><a href="">iPhone 7s</a> </dd>
              </dl>
            </li>
            <li>
              <dl class="clearfix" style="height: 96px; ">
                <dt><a class="open" href=""></a><a href="">保护壳</a> </dt>
                <dd><a href="">金属材质</a> </dd>
                <dd><a href="">皮质</a> </dd>
                <dd><a href="">塑料材质</a> </dd>
                <dd><a href="">木质</a> </dd>
                <dd><a href="">硅胶材质</a> </dd>
              </dl>
            </li>
           </ul>
         </div>
      </div>
    </div>
  </div>
</div>
</div>

</body>
</html>
